<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>当当网</title>
</head>
<style>
    .all{
        padding-left: 15px;
        width:980px;
        height:650px;
        margin: 0 auto;
    }
    .title{
        width:960px;
        height:70px;
    }
    .nav{
        width:960px;
        height:31px;
        background-color: orangered;
        color: white;
    }
    .carousel{
        margin-top: 8px;
        width:960px;
        height:120px;
    }
    .body{
        margin-top:15px;
        width:960px;
        height:350px;
        border: 3px solid greenyellow;
        position: relative;
    }
    .foot{
        margin-top:5px;
        width:960px;
        height:50px;
        text-align: center;
        font-size: 12px;
        color: #8c8c8c;
    }
    .title-right{
        width: 250px;
        height:40px;
        background-color:rgb(174, 243, 243);
        float: right;
        margin-top: 40px;
        position: relative;
    }
    ul{
        list-style-type: none;
        line-height: 31px;
        padding: 0 5px;
    }
    li{
        float:left;
        padding: 0 5px;
        font-size: 00.85em;
        width: 45px;
        text-align: center;
    }
    a{
        color: white;
        text-decoration: none;
    }
    .gif{
        position: absolute;
        top: 10px;
        left: -13px;
    }
    .no1{
        position: absolute;
        top: -5px;
        left: 20px;
    }
    .no2{
        position: absolute;
        top: 10px;
        left: 0px;
    }
    .no3{
        position: absolute;
        top: -5px;
        left: 0px;
    }
    .icon{
        position: absolute;
        top: -5px;
        left: 10px;
    }
    #content{
        font-size: 0.85em;
    }
</style>
<body>
    <!--整体的div-->
    <div class="all">
        <!--logo的整个页面长度div-->
        <div class="title">
            <img src="img/logo.jpg" style="padding:5px;float: left">
            <!--右上角的div-->
            <div class="title-right">
                <img src="img/icon_count.png" class="icon">
                <ul style="margin-top: 2px;float: left;">
                    <li style="width: 40px;font-size: 0.75em;padding-left: 0px;"><a href="#" style="color: black;">唯品会</a></li>
                    <li style="width: 50px;font-size: 0.75em;"><a href="#" style="color: black;">当当优品</a></li>
                    <li style="width: 40px;font-size: 0.75em;"><a href="#" style="color: black;">数字馆</a></li>
                    <li style="width: 50px;font-size: 0.75em;"><a href="#" style="color: black;">都看阅器</a></li>
                </ul>
            </div>
        </div>
        <!--首页图象的div-->
        <div class="nav">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">图书</a></li>
                <li><a href="#">音像</a></li>
                <li><a href="#">童装</a></li>
                <li><a href="#">服装</a></li>
                <li><a href="#">鞋靴</a></li>
                <li><a href="#">运动</a></li>
                <li><a href="#">箱包</a></li>
                <li><a href="#">美妆</a></li>
                <li><a href="#">珠宝</a></li>
                <li><a href="#">家具</a></li>
                <li><a href="#">食品</a></li>
                <li><a href="#">酒</a></li>
                <li><a href="#">手机</a></li>
                <li><a href="#">数码</a></li>
                <li><a href="#">电脑</a></li>
                <li><a href="#">家电</a></li>
            </ul>
        </div>
        <!--最大的图片的div-->
        <div class="carousel">
            <img src="img/banner.png">
        </div>
        <!--推荐书的div-->
        <div class="body">
            <img src="img/bg_bang.gif" class="gif">
            <!--偷影子的人的div-->
            <div style="width: 60%;height: 280px;margin-top: 70px;position: relative;float: left;">
                <img src="img/bookNo1.gif" class="no1">
                <div style="width: 260px;height: 280px;float: left;">
                    <img src="img/book-01.jpg">
                </div>
                <div style="float: right;width: 315px;height: 280px">
                    <p><a href="#" style="color: blue;">偷影子的人</a></p>
                    <p id="content">作者：[法]马克.李维（Marc Levy）著</p>
                    <p id="content">出版社：湖南文艺出版社</p>
                    <p id="content">当当价：<span style="color: brown;">￥17.90</span></p>
                    <p id="content" style="line-height: 24px;">不知道姓氏的克蕾儿。这就是你在我生命里的角色，
                        我童年时的小女孩，今日蜕变成了女人，一段青梅竹
                        马的回忆，一个时间之神没有应允的愿望。一个老
                        是受班上同学欺负的瘦弱小男孩，因为拥有一种特殊
                        能力而强大：他能“偷别人的影子”，
                    </p>
                
                </div>
            </div>
            <!--第二第三的div-->
            <div style="width: 40%;height: 300px;margin-top: 50px;position: relative;float: right;">
                <!--看见的div-->
                <div style="width: 100%;height: 50%;position: relative;"> 
                    <img src="img/bookNo2.gif" class="no2">
                    <div style="width:26%;height: 150px;float: left">
                        <img src="img/book-02.jpg" style="float: right;margin-top: 20px;">
                    </div>
                    <div style="width:74%;height: 150px;float: right;">
                        <p style="font-size: 0.90em;"><a href="#" style="color: blue;">看见（央视知名记者、主持人柴静：十年个人成长的告白，中国社会变迁的备忘</a></p>
                        <p id="content">作者：柴静 著</p>
                        <p id="content">出版社：广西师范大学出版社</p>
                        <p id="content"><span style="color: brown;">￥29.90&emsp;</span><span style="color:rgb(117, 231, 197);">7.4折</span></p>
                    </div>
                </div>
                <!--改变孩子的div-->
                <div style="width: 100%;height: 50%;position: relative;">
                    <img src="img/bookNo3.gif" class="no3">
                    <div style="width:25%;height: 150px;float: left;">
                        <img src="img/book-03.jpg" style="float: right;margin-top: 5px;">
                    </div>
                    <div style="width:74%;height: 150px;float: right;">
                        <p style="font-size: 0.90em;"><a href="#" style="color: blue;">改变孩子先改变自己</a></p>
                        <p id="content">作者：贾容韬 贾毅 著</p>
                        <p id="content">出版社：作家出版社</p>
                        <p id="content"><span style="color: brown;">￥22.20&emsp;</span><span style="color:rgb(117, 231, 197);">7.4折</span></p>
                    </div>
                </div>
            </div>
        </div>
        <!--批号的div-->
        <div class="foot">
            <span>Copyright 2004 - 2021 当当网. All Rights Reserved</span>
            <img src="img/validate.gif">
            <span>京ICP证041189号|出版物经营许可证 新出发京批字第直0673号</span>
        </div>
    </div>
</body>
</html>